<!--模版-->
<template>
  <h4>我的第一个页面{{info}}</h4>
  <hr>
  <button @click="f()">按钮</button>
  <hr>
  <p>{{aaa}}</p>
  <p v-text="aaa"></p>
  <p v-html="aaa"></p><!--v-html也是数据绑定，若值中有标签，会渲染除html效果-->
</template>

<!--定义响应式变量-->
<!--导入响应式变量-->
<!--插值指令，将页面显示的文本与响应式变量的值进行绑定
如果修改响应式变量的值，页面显示会随之改变-->
<script setup>

import {ref} from "vue";
const info =ref('我是info')
const f= ()=>{
  console.log('点击了按钮')
  console.log(info.value)
  info.value='我是新值'
}
const aaa=ref('展示<mark>高亮</mark>效果')
</script>

<style scoped>

</style>